<template>
    <div class="wrap-question bottom-line">
        <div class="question clearfix" @click="changeContentVisible">
            <div class="text">{{index + 1}}、{{item.question}}</div>
            <span class="arrow icon" :class="{ 'invert': contentVisible }">&#xe770;</span>
        </div>
        <div class="content" v-if="contentVisible">
            <div class="answer">{{item.answer}}</div>
            <div class="img-box" v-if="item.img">
                <!-- 图片路径需改成item.img -->
                <img class="img" :src="item.img" alt="图片">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'QuestionItem',
    props: {
        item: {
            type: Object,
            required: true,
        },
        index: {
            type: Number,
            required: true,
        },
    },
    data() {
        return {
            contentVisible: false,
        };
    },
    methods: {
        changeContentVisible() {
            this.contentVisible = !this.contentVisible;
        },
    },
};
</script>

<style lang="less">

.wrap-question {
    position: relative;
    padding: 10px;
    &.bottom-line:after {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        content: '';
        width: 100%;
        height: 1px;
        transform: scaleY(.5);
        background-color: #BBBBBB;
    }
    .question {
        .text {
            float: left;
            width: 320px;
        }
        .arrow {
            float: right;
            box-sizing: border-box;
            text-align: right;
            width: 20px;
            height: 20px;
            font-size: 20px;
            transition: transform .3s;
        }
        .invert {
            transform: rotateZ(90deg);
        }
    }
    .content {
        padding-top: 10px;
        transition: all .3s;
    }
    .img-box {
        text-align: center;
        .img {
            padding: 10px 0;
            width: 200px;
            height: 200px;
        }
    }
}
</style>
